<template>
    <view class="home">
        <custom-head-bar id="customHeadBar" :foldState="foldState"/>
        <view class="wrapper">
            <view class="infoModel">
                <view class="left">免费配送</view>
                <view class="right">我的订单</view>
            </view>
            <view class="scrollLayout">
                <view class="left-scroll">
                    <scroll-view class="sContent" scroll-y :scroll-top="leftScrollValue" scroll-with-animation="">
                        <view
                            class="nav-item"
                            :class="index == navIdx ? 'active' : ''"
                            v-for="(item, index) in 20" :key="index"
                            @tap="clickNav(index)"
                        >
                            {{ item }}
                        </view>
                    </scroll-view>
                </view>
                <view class="right-scroll">
                    <view class="searchView">
                        搜索
                    </view>
                    <scroll-view @scroll="rightScrollEnt" :scroll-top="rightScrollValue" scroll-with-animation=""
                                 class="sContent" scroll-y>
                        <view class="productView" v-for="(item, index) in 20" :key="index">
                            <u-sticky :custom-nav-height="0" :z-index="2">
                                <view class="proTitle">产品名称{{ item }}</view>
                            </u-sticky>
                            <view class="proContent">
                                <view class="proitem" v-for="(pro, index1) in 3" :key="index1">
                                    <product-item/>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </view>
        <!-- 购物车 -->
        <car-layout></car-layout>
    </view>
</template>

<script>
import CustomHeadBar from "../../components/CustomHeadBar/CustomHeadBar.vue";
import ProductItem from "../../components/ProductItem.vue";
import USticky from "../../uni_modules/uview-ui/components/u-sticky/u-sticky.vue";
import CarLayout from "../../components/CarLayout/CarLayout.vue";

export default {
    components: {CarLayout, USticky, ProductItem, CustomHeadBar},
    data() {
        return {
            title: 'Hello',
            navIdx: 0,
            leftScrollValue: 0,
            rightScrollValue: 0,
            leftHeightArr: [],
            rightHeightArr: [],
			foldState: false
        };
    },
    onLoad() {
        this.$nextTick(() => {
            this.getHeightArr()
        })

    },
    methods: {
        clickNav(index) {
            if (this.navIdx === index) return
            this.navIdx = index
            if (this.timeout) {
                clearTimeout(this.timeout)
            }
            this.timeout = setTimeout(() => {
                this.leftScrollValue = this.leftHeightArr[index];
                this.rightScrollValue = this.rightHeightArr[index];
            }, 100);
        },
        /**
         * 获取滚动条的高度
         */
        getHeightArr() {
            let selectorQuery = uni.createSelectorQuery()
			let customHeadBar;
			// 获取自定义导航的高度
			selectorQuery.select("#customHeadBar").boundingClientRect(rect => {
			    customHeadBar = rect.height;
			}).exec();
			
            // 左侧滚动区域节点组
            selectorQuery.selectAll(".nav-item").boundingClientRect(rects => {
                this.leftHeightArr = rects.map(item => item.top - customHeadBar)
            }).exec();
			
            // 右边侧滚动区域节点组
            selectorQuery.selectAll(".productView").boundingClientRect(rects => {
                this.rightHeightArr = rects.map(item => item.top - customHeadBar)
            }).exec();
        },
        // 监听右侧滚动条改变
        rightScrollEnt(e) {
            let scrollTop = Math.ceil(e.detail.scrollTop);
            let idx = this.rightHeightArr.findIndex((value, index, obj) => {
                return scrollTop >= value && scrollTop < obj[index + 1];
            });
            this.navIdx = idx;
            this.leftScrollValue = this.leftHeightArr[idx];
			
			if (scrollTop < 300) {
				this.foldState = false;
			}
			
			if (scrollTop > 400) {
				this.foldState = true
			}
        }
    }
};
</script>

<style lang="scss">
.home {
    height: 100vh;
    display: flex;
    flex-direction: column;

    .wrapper {
        background-color: $border-color-light;
        border-radius: 20rpx 20rpx 0 0;
        flex: 1;
        position: relative;
        overflow: hidden;

        .infoModel {
            color: $brand-theme-color;
            @include flex-box();
            height: 100rpx;
            padding: 0 30px;
            font-size: 32rpx;
            background: #9d9999;

            .right {
                display: flex;
                justify-content: center;
                align-items: center;
            }

        }

        .scrollLayout {
            height: calc(100% - 100rpx);
            @include flex-box();

            .sContent {
                height: 100%;
                border-right: 1px solid;
            }

            .left-scroll {
                height: 100%;
                min-width: 190rpx;

                .nav-item {
                    font-size: 30rpx;
                    padding-left: 30rpx;
                    line-height: 100rpx;
                    color: $text-font-color-2;
                    position: relative;

                    &.active {
                        color: $text-font-color-1;
                        background-color: white;

                        &::after {
                            content: "";
                            width: 6rpx;
                            height: 30rpx;
                            background-color: $brand-theme-color;
                            position: absolute;
                            left: 0;
                            top: 50%;
                            transform: translateY(-50%);
                        }
                    }
                }
            }

            .right-scroll {
                height: 100%;
                overflow: hidden;
                flex: 1;
                position: relative;

                .searchView {
                    position: absolute;
                    top: 0;
                    right: 30rpx;
                    z-index: 3;
                }

                .productView {
                    padding: 0 30rpx;

                    .proTitle {
                        line-height: 90rpx;
                        font-size: 30rpx;
                        background: #fff;
                    }
                }
            }
        }
    }
}
</style>
